<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" >

<head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>首页广告</title>
        <link rel="icon" href="favicon.ico" type="image/ico">
        <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
        <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
        <meta name="author" content="yinqi">
        <link href="/lib/css/bootstrap.min.css" rel="stylesheet">
        <link href="/lib/css/materialdesignicons.min.css" rel="stylesheet">
        <!--标签插件-->
        <link rel="stylesheet" href="/lib/js/jquery-tags-input/jquery.tagsinput.min.css">
        <link href="/lib/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                   <!-- <form action="#!" method="post" class="row">-->
                        <div class="form-group col-md-12">
                            <label for="titles">广告标题</label>
                            <input type="text" class="form-control" id="titles" name="titles" th:value="${promote.title}" placeholder="请输入标题" />
                        </div>
                        <div class="form-group col-md-12">
                            <label for="seo_keywords">广告连接</label>
                            <input type="text" class="form-control" id="seo_keywords" name="seo_keywords" th:value="${promote.connect}" placeholder="输入链接" />
                        </div>
                        <div class="form-group col-md-12">
                            <label for="seo_description">广告内容</label>
                            <textarea class="form-control" id="seo_description" name="seo_description" rows="5"  placeholder="内容"></textarea> </div>
                        <div class="form-group col-md-12">
                            <label>广告背景图片</label>
                            <div class="form-controls">
                                <ul class="list-inline clearfix lyear-uploads-pic">
                                    <li class="col-xs-4 col-sm-3 col-md-2">
                                        <figure>
                                            <img id="img0" th:src="${promote.picture}" alt="图片一">
                                        </figure>
                                    </li>
                                    <li class="col-xs-4 col-sm-3 col-md-2">
                                        <form name="form0" id="form0" enctype="multipart/form-data">
                                            <input type="file" name="file" id="file0" multiple="multiple" /><br>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <button type="submit" class="btn btn-primary ajax-post" target-form="add-form" onclick="subfrom()">确定修改</button>
                            <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                        </div>
                   <!-- </form>-->
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="pid" th:value="${promote.id}">
<input type="hidden" id="mid" th:value="${promote.mid}">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<script th:inline="javascript">
    document.getElementById("seo_description").value=[[${promote.content}]]
</script>
<script>
    var imgsrc=""
    /*上传前图片展示*/
    $("#file0").change(function(){
        var type=this.files[0].name;
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
        var fileType = type.substr(type.length - 4, type.length);
        if (fileType == '.bmp' || fileType == '.jpg' || fileType == '.tif' ||
            fileType == '.gif' || fileType == '.png' || fileType == '.pcx'  ||
            fileType == '.tga'|| fileType == '.exif'|| fileType == '.fpx'   ||
            fileType == '.svg'|| fileType == '.psd'|| fileType == '.cdr'   ||
            fileType == '.pcd' ) {
            $("#img0").attr("src", objUrl);
        }else {
            alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")
        }
    }) ;
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    /*代码上传*/
    function subfrom() {
        $.ajax({
            url: '/file/upload',//上传地址
            type: 'POST',
            cache: false,
            data: new FormData($('#form0')[0]),//表单数据
            processData: false,
            contentType: false,
            success: function (rtn) {
                if (rtn.status == 'error') {
                    alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")　　//根据后端返回值,回显错误信息
                } else {
                    /*上传成功*/
                    imgsrc="https://"+rtn.name;
                    console.log("https://"+rtn.name)
                    subimg();
                }
            }
        });

    }
    function subimg() {
        if( imgsrc.length>0){
            $.ajax({
                url:"update",
                type:'post',
                data:{
                    id:$("#pid").val(),
                    content:$("#inp").val(),
                    title:$("#title").val(),
                    picture:imgsrc,
                    connect:$("#seo_keywords").val(),
                    mid:$("#mid").val()
                },
                datatyp:'json',
                success:function (message) {
                    if (message.code==0){
                        //正确
                        alert("更新成功！")
                    }else {
                        alert("更新失败！")
                    }
                }
            })
        }else {
            alert("更新失败！")
        }

    }
</script>
<script type="text/javascript" src="/lib/js/jquery.min.js"></script>
<script type="text/javascript" src="/lib/js/bootstrap.min.js"></script>
<!--标签插件-->
<script src="/lib/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/lib/js/main.min.js"></script>
</body>
